<template>
	<view class="personal">
		<view class="topFixed" style="position: fixed; width: 100%; background: #ebbe87; z-index: 10">
			<view :style="'height:' + navBarInfo.statusBarHeight + 'px;'"></view>
			<view class="flex align-center justify-end" :style="'height:' + navBarInfo.navBarHeight + 'px;width:' + navBarInfo.navBarWidth + 'px;'">
				<view class="text-overflow1 flex align-center justify-center" style="font-size: 32rpx; color: #fff" :style="'width:' + navBarInfo.navBarContentWidth + 'px;'">
					个人中心
				</view>
			</view>
			<view class="flex align-center justify-between" style="padding: 50rpx 30rpx 56rpx 30rpx">
				<view v-if="isLogin == true" class="flex flex-1 align-center">
					<view style="font-size: 0; margin-right: 30rpx">
						<image style="width: 90rpx; height: 90rpx; border-radius: 50%" :src="user.avatar"></image>
					</view>
					<view class="flex-1 text-overflow1" style="font-size: 40rpx; font-weight: 700; color: #fff">
						{{ user.nickname }}
					</view>
				</view>
				<view v-else @click="goLogin" class="flex flex-1 align-center">
					<view style="font-size: 0; margin-right: 30rpx">
						<image style="width: 90rpx; height: 90rpx; border-radius: 50%" src="https://sz.vvv5g.com/assets/addons/wanlshop/img/common/mine_def_touxiang_3x.png"></image>
					</view>
					<view class="flex-1 text-overflow1" style="font-size: 40rpx; font-weight: 700; color: #fff">登录/注册</view>
				</view>
				<view class="flex align-center justify-center" @click="upData" style="width: 202rpx; height: 56rpx; background: rgba(0, 0, 0, 0.1); border-radius: 28rpx">
					<view style="font-size: 0">
						<image style="width: 27rpx; height: 22rpx" src="../../static/personal/shux.png"></image>
					</view>
					<view style="font-size: 28rpx; color: #fff; margin-left: 9rpx">刷新信息</view>
				</view>
			</view>
			<view class="flex align-center justify-around">
				<view @click="shoppingCart" class="flex flex-column align-center justify-center">
					<view style="font-size: 48rpx; font-weight: 700; color: #000">
						{{ cartList || 0 }}
					</view>
					<view style="font-size: 28rpx; color: rgba(0, 0, 0, 0.8); margin-top: 6rpx">购物车</view>
				</view>
				<view @click="getCollection" class="flex flex-column align-center justify-center">
					<view style="font-size: 48rpx; font-weight: 700; color: #000">
						{{ collectionList || 0 }}
					</view>
					<view style="font-size: 28rpx; color: rgba(0, 0, 0, 0.8); margin-top: 6rpx">我的收藏</view>
				</view>
				<view @click="getBrowse" class="flex flex-column align-center justify-center">
					<view style="font-size: 48rpx; font-weight: 700; color: #000">
						{{ footprint || 0 }}
					</view>
					<view style="font-size: 28rpx; color: rgba(0, 0, 0, 0.8); margin-top: 6rpx">浏览记录</view>
				</view>
				<view @click="gotoMsg" class="flex flex-column align-center justify-center">
					<view style="font-size: 48rpx; font-weight: 700; color: #000">
						{{ msgNum }}
					</view>
					<view style="font-size: 28rpx; color: rgba(0, 0, 0, 0.8); margin-top: 6rpx">我的消息</view>
				</view>
			</view>
			<view
				class="flex align-center justify-between"
				style="margin-top: 54rpx; background: #fff; padding: 47rpx 32rpx 26rpx 32rpx; background: #fff; border-radius: 48rpx 48rpx 0 0"
			>
				<view v-for="(item, index) in stateList" :key="index" @click="goState(index)" class="flex flex-column align-center justify-center">
					<view style="font-size: 0">
						<image style="width: 52rpx; height: 52rpx" :src="item.img"></image>
						<uni-badge style="position: relative; top: -48upx" v-if="item.badge > 0" size="small" :text="item.badge" absolute="rightTop" type="error"></uni-badge>
					</view>
					<view style="margin-top: 21rpx; font-size: 22rpx; color: #333">
						{{ item.txt }}
					</view>
				</view>
			</view>
		</view>
		<view :style="'height:' + topFixedHeight + 'px;'"></view>
		<view class="content_box">
			<view class="list_bottom_box">
				<view class="list_bottom w100 flex flexjus" v-for="(item, index) in listData" :key="index" @click="goYe(item.index)">
					<view class="bot_left_box flex align-center">
						<view class="bot_img" style="font-size: 0">
							<image class="bot_image w100 h100" :src="item.img"></image>
						</view>
						<view class="juan_txt f500 family">
							{{ item.txt }}
						</view>
					</view>
					<view class="bot_right_jian">
						<uni-badge class="flex" :is-dot="true" type="error" :text="item.badge" size="small"></uni-badge>
						<uni-icons type="right" size="16" style="font-weight: bold"></uni-icons>
					</view>
				</view>
				<button style="padding: unset; margin: unset; line-height: unset; font-size: unset; border: unset" open-type="contact" :plain="true" hover-class="none">
					<view class="list_bottom w100 flex flexjus">
						<view class="bot_left_box flex align-center">
							<view class="bot_img">
								<image class="bot_image w100 h100" src="../../static/personal/kefu.png"></image>
							</view>
							<view class="juan_txt f500 family">我的客服</view>
						</view>
						<view class="bot_right_jian">
							<uni-icons type="right" size="16" style="font-weight: bold"></uni-icons>
						</view>
					</view>
				</button>
			</view>
		</view>
		<uni-popup ref="popup" type="top">
			<view class="phone_popup_box">
				<view class="bd_txt_max family s32 fblod txtali">绑定手机号</view>
				<view class="phone_min_txt family s24 txtali">如果您微信的绑定手机号已更换</view>
				<button
					type="primary"
					open-type="getPhoneNumber"
					@getphonenumber="decryptPhoneNumber"
					style="margin-top: 32rpx; background-color: #ebbe87; font-weight: 600; width: 416rpx; border-radius: 50rpx; color: #844902"
				>
					确认更新手机号
				</button>
				<view class="future_btn family s32 txtali f500" @click="close">以后再说</view>
			</view>
		</uni-popup>
		<!-- 商家职员点击帮卖分成 -->
		<uni-popup ref="popupss" type="center" backgroundColor="transparent">
			<view class="k_box">
				<view class="titl">您的级别是商家职员，推荐全平台商品可获得推荐奖励，无需申请城市合伙人！</view>
				<view class="btn_box">
					<view class="btn_l btn_r" style="color: #ebbe87" @click="iKnow">我知道了</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			rotate: '',
			stateList: [
				{
					img: '../../static/personal/daishouhuo.png',
					badge: '0',
					txt: '待付款'
				},
				{
					img: '../../static/personal/zhifu.png',
					badge: '0',
					txt: '已支付'
				},
				{
					img: '../../static/personal/shouhuo.png',
					badge: '0',
					txt: '待收货'
				},
				{
					img: '../../static/personal/pingjia.png',
					badge: '0',
					txt: '待评价'
				},
				{
					img: '../../static/personal/shouho.png',
					badge: '0',
					txt: '退款/售后'
				},
				{
					img: '../../static/personal/quanbu.png',
					badge: '0',
					txt: '全部订单'
				}
			],
			listData: [
				{
					img: '../../static/personal/youhuijuan.png',
					txt: '我的优惠券',
					index: 0,
					badge: 0
				},
				{
					img: '../../static/personal/bangmai.png',
					txt: '帮卖分成',
					index: 1,
					badge: 0
				},
				{
					img: '../../static/personal/shangjia.png',
					txt: '商家入驻',
					index: 2,
					badge: 0
				},
				{
					img: 'https://sz.vvv5g.com/assets/img/wxImg/chengweifuwshang.png',
					txt: '成为服务商',
					index: 9,
					badge: 0
				},
				{
					img: '../../static/personal/dizhi.png',
					txt: '收货地址',
					index: 3
				},
				{
					img: '../../static/personal/renzheng.png',
					txt: '提现认证',
					index: 4
				},
				{
					img: '../../static/personal/shezhi.png',
					txt: '隐私设置',
					index: 5
				},
				{
					img: '../../static/personal/xiugai.png',
					txt: '修改手机',
					index: 6
				},
				{
					img: '../../static/personal/tousu.png',
					txt: '我要投诉',
					index: 7
				},
				{
					img: '../../static/personal/tousu.png',
					txt: '协议及政策',
					index: 10
				},
				{
					img: '../../static/personal/bangzhu.png',
					txt: '帮助中心',
					index: 8
				}
			],
			user: {},
			centent: 1,
			isLogin: '',
			cartList: 0,
			collectionList: 0,
			recordDate: {},
			status: 0, //0未申请1已申请未答题2已答题待助力
			sure: 0, //已确认
			memberData: {},
			navBarInfo: {},
			topFixedHeight: 0,
			isMayhehuoren: true, //
			footprint: 0,
			msgNum: 0,
			couponData: null
		};
	},
	onLoad() {
		this.navBarInfo = this.$navBarInfo;
	},
	mounted() {
		const query = uni.createSelectorQuery().in(this);
		query
			.select('.topFixed')
			.boundingClientRect((data) => {
				this.topFixedHeight = data.height;
			})
			.exec();
	},
	onShow() {
		if (uni.getStorageSync('userInfo')) {
			this.user = uni.getStorageSync('userInfo');
			this.isLogin = uni.getStorageSync('isLogin');
			this.cartList = uni.getStorageSync('cartList').length;
			this.collectionList = uni.getStorageSync('collectionList').length;
			this.recordDate = uni.getStorageSync('recordDate');
			this.getStatus();
			// 获取订单角标
			this.getBadge();
			this.getMemberData();
			this.getCouponList();
			this.stateList.forEach((item) => {
				if (item?.badge) {
					uni.showTabBarRedDot({
						index: 4
					});
				}
			});
			this.listData.forEach((item) => {
				if (item?.badge) {
					uni.showTabBarRedDot({
						index: 4
					});
				}
			});
		} else {
			this.$wanlshop.msg('您还是没有登录!');
		}
	},
	methods: {
		iKnow() {
			this.$refs.popupss.close();
		},
		getMemberData() {
			let that = this;
			that
				.$request({
					url: 'member/getInfo',
					method: 'POST'
				})
				.then((res) => {
					if (res.data.code == 1) {
						that.memberData = res.data.data;
						res.data.data.identity == '2' ? (that.txtShow = false) : (that.txtShow = true);
						res.data.data.identity == '3' ? (that.title = '商家职员内部排行') : res.data.data.identity == '2' ? (that.title = '城市合伙人排行') : '';
						if (res.data.data.shop != null && res.data.data.shop.length != 0 && res.data.data.shop) {
							this.isMayhehuoren = false;
						} else {
							this.isMayhehuoren = true;
						}
						this.listData[1].badge = res.data.data.bangmai;
						this.listData[2].badge = res.data.data.shop_notice;
						this.listData[3].badge = res.data.data.agent_notice;
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							mask: true
						});
					}
				});
		},
		getCouponList() {
			this.$request({
				url: 'manage/getcoupon',
				method: 'post'
			}).then((res) => {
				const { code, data } = res.data;
				if (code == 1) {
					// this.stateList[5]['badge'] = data.order_count
					this.listData[0].badge = data.coupon_count;
				}
			});
		},
		getBadge() {
			this.$request({
				url: 'user/order_num',
				method: 'GET'
			}).then((res) => {
				this.stateList[0]['badge'] = res.data.data.order1;
				this.stateList[1]['badge'] = res.data.data.order2;
				this.stateList[2]['badge'] = res.data.data.order3;
				this.stateList[3]['badge'] = res.data.data.order4;
				this.stateList[4]['badge'] = res.data.data.order5;
				this.footprint = res.data.data.footprint;
			});
		},
		getStatus() {
			this.$request({
				url: 'partners/question_sure_info',
				method: 'POST',
				data: {
					user_id: uni.getStorageSync('userInfo').id
				}
			}).then((res) => {
				if (res.data.code == 1) {
					this.status = res.data.data.status;
				}
			});
			this.$request({
				url: 'partners/question_sure_info',
				method: 'POST',
				data: {
					user_id: uni.getStorageSync('userInfo').id
				}
			}).then((res) => {
				if (res.data.code == 1) {
					if (res.data.data.question && res.data.data.question.sure) {
						this.sure = res.data.data.question.sure;
					}
				}
			});
		},
		decryptPhoneNumber(e) {
			var _this = this;
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				uni.login({
					success(res) {
						let { iv, cloudID, code, encryptedData } = e.detail;
						_this
							.$request({
								url: 'user/phoneDecrypt',
								method: 'POST',
								data: {
									iv: iv,
									encryptedData: encryptedData,
									code: res.code
								}
							})
							.then((res) => {
								this.$getUserInfo();
							});
					}
				});

				this.$wanlshop.msg('授权成功');
				this.$refs.popup.close();
			} else {
				this.$wanlshop.msg('授权失败');
			}
		},
		close() {
			this.$refs.popup.close();
		},
		getCollection() {
			uni.navigateTo({
				url: '/pages/filePages/collection/collection'
			});
		},
		getBrowse() {
			uni.navigateTo({
				url: '/pages/filePages/browse/browse'
			});
		},
		gotoMsg() {
			uni.navigateTo({
				url: '/pages/index/messageCenter'
			});
		},
		upData() {
			this.rotate = `rotateZ(${360 * this.centent}deg)`;
			let time = setTimeout(() => {
				this.centent++;
				clearTimeout(time);
			}, 500);
			this.$getUserInfo();
			if (uni.getStorageSync('userInfo')) {
				this.user = uni.getStorageSync('userInfo');
			}
		},
		shoppingCart() {
			uni.navigateTo({
				url: '../filePages/shopping_cart/shopping_cart'
			});
		},
		goLogin() {
			uni.showLoading({
				title: '',
				mask: true
			});
			this.loagin();
			var timer = setInterval((res) => {
				if (uni.getStorageSync('userInfo')) {
					clearInterval(timer);
					uni.hideLoading();
					this.user = uni.getStorageSync('userInfo');
					this.isLogin = uni.getStorageSync('isLogin');
					this.cartList = uni.getStorageSync('cartList').length;
					this.collectionList = uni.getStorageSync('collectionList').length;
					this.recordDate = uni.getStorageSync('recordDate');
					this.getStatus();

					// 获取订单角标
					this.getBadge();
					this.getMemberData();
				}
			}, 500);
		},
		goState(index) {
			if (index == 5) {
				index = 0;
			} else {
				index = index + 1;
			}
			uni.navigateTo({
				url: '/pages/filePages/orderInformation/orderInformation?index=' + index
			});
		},
		LogOut() {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '功能未开发，敬请期待。',
				showCancel: false,
				success: function (res) {
					if (res.confirm) {
					}
				}
			});
		},
		goYe(index) {
			if (index == 2) {
				uni.navigateTo({
					url: '../filePages/merchantInformation/settled'
				});
			} else if (index == 7) {
				uni.navigateTo({
					url: '../filePages/complaint/complaint'
				});
			} else if (index == 5) {
				uni.navigateTo({
					url: '../filePages/privacySet/privacySet'
				});
			} else if (index == 1) {
				let that = this;
				this.$request({
					url: 'member/getInfo',
					method: 'POST'
				}).then((res) => {
					if (res.statusCode == 200) {
						that.memberData = res.data.data;
						res.data.data.identity == '2' ? (that.txtShow = false) : (that.txtShow = true);
						res.data.data.identity == '3' ? (that.title = '商家职员内部排行') : res.data.data.identity == '2' ? (that.title = '城市合伙人排行') : '';
						if (res.data.data.shop != null && res.data.data.shop.length != 0 && res.data.data.shop) {
							this.isMayhehuoren = false;
						} else {
							this.isMayhehuoren = true;
						}
						if (this.memberData.identity == 4) {
							return uni.showToast({
								title: '您已成为城市合伙人，享受平台城市合伙人权益',
								icon: 'none'
							});
						}
						if (this.sure == 1 && this.memberData.identity != 4) {
							return uni.showToast({
								title: '您已完成城市合伙人申请，请耐心等待工作人员审核。',
								icon: 'none'
							});
						}
						if (this.memberData.identity == 3) {
							return this.$refs['popupss'].open();
						}
						if (this.status == 0) {
							uni.navigateTo({
								url: '../filePages/helpSell/helpSell'
							});
						} else if (this.status == 1) {
							uni.navigateTo({
								url: '../filePages/helpSell/helpSubmit'
							});
						} else if (this.status == 2 || this.status == 3) {
							uni.navigateTo({
								url: '/pages/answer/answer?finshow=' + true
							});
						}
					}
				});
			} else if (index == 4) {
				uni.navigateTo({
					url: '../filePages/withdrawal/withdrawal'
				});
			} else if (index == 3) {
				uni.navigateTo({
					url: '../filePages/addres/addres'
				});
			} else if (index == 8) {
				uni.navigateTo({
					url: '../filePages/help/help'
				});
			} else if (index == 10) {
				uni.navigateTo({
					url: '../filePages/policy/policy'
				});
			} else if (index == 0) {
				uni.navigateTo({
					url: '../filePages/coupon/coupon'
				});
			} else if (index == 6) {
				this.$refs.popup.open('center');
			} else if (index == 9) {
				// 成为服务商
				uni.navigateTo({
					url: '/pages/news/sanqi/chengweifuwushang'
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.k_box {
	width: 468upx;

	background: #ffffff;
	border-radius: 32upx;

	.titl {
		color: #000;
		font-size: 30upx;
		font-weight: 550;
		text-align: center;
		padding-top: 72upx;
		padding-left: 15rpx;
		padding-right: 15rpx;
	}

	.btn_box {
		width: 100%;
		margin-top: 60upx;
		height: 92upx;
		display: flex;
		justify-content: space-between;
		border-top: 2upx solid #f4f4f4;
		.btn_r {
			width: 100%;
			color: #333;
			border-left: 2upx solid #f4f4f4;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

button {
}

.personal {
	width: 100%;

	.phone_popup_box {
		height: 420upx;
		width: 552upx;
		border-radius: 32upx;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 80upx 0 0 0;

		.bd_txt_max {
			color: #000000;
		}

		.phone_min_txt {
			color: #999;
			margin-top: 42upx;
		}

		.future_btn {
			color: #666666;
			margin-top: 28upx;
		}
	}

	.header_box {
		width: 750upx;
		height: 622upx;
		background: #ebbe87;
		overflow: hidden;

		.personal_title {
			font-size: 32upx;
			font-weight: 500;
			color: #ffffff;
			text-align: center;
			margin-top: 114upx;
		}

		.header_center {
			padding: 0 32upx 0 30upx;
			margin-top: 62upx;

			.left_portrait {
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
			}

			.name {
				width: 300upx;
				font-size: 40upx;
				color: #ffffff;
				line-height: 88upx;
				margin-left: 28upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.shux_btn {
				width: 202upx;
				height: 56upx;
				background: rgba(0, 0, 0, 0.1);
				border-radius: 28upx 28upx 28upx 28upx;
				margin-top: 20upx;

				.shux_img {
					width: 30upx;
					height: 30upx;
					margin-left: 24upx;
					margin-top: 14upx;
					transition: 0.5s;
				}

				.shux_txt {
					font-size: 28upx;
					color: #ffffff;
					margin-top: 8upx;
					margin-left: 8upx;
				}
			}
		}

		.header_bottom {
			padding-left: 106upx;
			padding-right: 106upx;
			// margin-top: 30upx;

			.con_box {
				.top_num {
					font-size: 48upx;
					color: #000000;
					line-height: 56upx;
					margin-top: 56upx;
					text-align: center;
				}

				.bot_txt {
					font-size: 28upx;
					color: rgba(0, 0, 0, 0.8);
					text-align: center;
				}
			}

			.con_box:nth-child(1) {
				margin-left: 0upx;
			}
		}
	}

	.content_box {
		width: 750upx;
		background: #f4f5f9;
		border-radius: 48upx 48upx 0 0;
		// margin-top: -80upx;
		overflow: hidden;

		.con_header {
			height: 170upx;
			background: #ffffff;
			overflow: hidden;

			.con_list_box {
				margin-top: 44upx;

				.list_flex {
					width: 110upx;
					margin-left: 6upx;

					.shouhuo_img {
						width: 52upx;
						height: 52upx;
						margin: 0 auto;
					}

					.shouhuo_txt {
						font-size: 22upx;
						color: #333333;
						text-align: center;
						margin-top: 18upx;
					}
				}

				.list_flex:nth-child(1) {
					margin-left: 30upx;
				}
			}
		}

		.list_bottom_box {
			justify-content: space-between;
			align-items: center;
			width: 682upx;
			background: #ffffff;
			margin-top: 20upx;
			padding: 0 36upx 50upx 32upx;

			.list_bottom {
				height: 98upx;
				border-bottom: 2upx solid #f4f4f4;
				line-height: 98upx;

				.bot_left_box {
					.bot_img {
						width: 40upx;
						height: 40upx;
						padding-right: 12upx;
						margin-top: 3rpx;
						.bot_image {
							vertical-align: top;
						}

						.juan_txt {
							font-size: 28upx;
							color: #000000;
						}
					}
				}

				.bot_right_jian {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
}
</style>
